<template>
  <div>
    <v-dialog
        v-model="dialog1"
        width="50%"
        scrollable
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">申诉处理</span>
        </v-card-title>
        <v-card-text>
          <v-textarea label="请填写处理结果" v-model="result"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="primary"
              @click="deal"
          >
            提交处理
          </v-btn>
          <v-btn
              color="green darken-1"
              text
              @click="closeClaim"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog
        v-model="dialog"
        width="50%"
        scrollable
    >
      <v-card>
        <v-card-title>
          <span class="text-h5">申诉理由</span>
        </v-card-title>
        <v-card-text v-if="reason === ''">无</v-card-text>
        <v-card-text v-else v-html="reason"></v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="green darken-1"
              text
              @click="dialog = false"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-data-table
        :headers="headers"
        :items="desserts"
        class="elevation-1"
        style="min-height: 500px"
        disable-sort
        hide-default-footer
    >
      <template v-slot:[`item.status`]="{ item }">
        <v-chip v-if="item.status === 0"
                color="warning"
                dark
        >
          待处理
        </v-chip>
        <v-chip v-else
                color="success"
                dark
        >
          已处理
        </v-chip>
      </template>
      <template v-slot:[`item.edit`]="{ item }">
        <a @click="checkReason(item)">查看理由</a> ｜ <span v-if="item.status === 0"><a @click="fillResult(item.id)">填写处理结果</a> ｜</span> <a @click="Delete(item)">删除</a>
        <!--      <v-divider vertical/>-->
        <!--      <v-icon @click="item.status = ~item.status">{{ icons.mdiCheckBold }}</v-icon>-->
      </template>
    </v-data-table>
  </div>
</template>

<script>
import {
  mdiPencil,
  mdiCheckBold
} from "@mdi/js";
import axios from "axios";

export default {
  name: "ApplyCheck",
  inject: ['reload'],
  data () {
    return {
      dialog: false,
      dialog1: false,
      reason: '',
      result: '',
      id: 0,
      headers: [
        {
          text: '申诉序号',
          align: 'center',
          value: 'id'
        },
        {
          text: '申诉者ID',
          align: 'center',
          value: 'applyer',
        },
        {
          text: '申诉时间',
          value: 'apply_time',
        },
        // { text: '备注', value: 'apply_comment' },
        { text: '处理状态', value: 'status' },
        { text: '操作', value: 'edit' },
      ],
      desserts: [],
    }
  },
  methods: {
    // submitClaim(){
    //   const that = this;
    //   axios
    //       .post('/api/apply/claim/', {
    //         reason: that.reason
    //       }, {
    //         headers: {
    //           Authorization: "Bearer " + localStorage.getItem("access"),
    //         }
    //       })
    //       .then(function (){
    //         that.dialog1 = false;
    //         that.result = '';
    //         that.$notify.success({
    //           title: '提交处理成功',
    //           message: '辛苦管理'
    //         })
    //       })
    //       .catch(function (error){
    //         that.$notify.error({
    //           title: '提交处理失败',
    //           message: error.message
    //         })
    //       })
    // },
    closeClaim(){
      this.dialog1 = false;
      this.result = '';
    },
    Delete(item){
      // this.desserts.remove(item);
      const that = this;
      axios
          .delete('/api/apply/claim/' + item.id + '/', {
            headers: {
              Authorization: 'Bearer ' + localStorage.getItem('access')
            }
          })
          .then(function (){
            that.$notify.success({
              title: '删除成功'
            })
            that.reload();
          })
          .catch(function (error){
            that.$notify.error({
              title: '操作失败',
              message: error.message
            })
          })
    },
    deal(){
      // this.desserts.remove(item);
      const that = this;
      axios
        .patch('/api/apply/claim/' + this.id + '/', {
          status: 1,
          result: that.result
        }, {
          headers: {
            Authorization: 'Bearer ' + localStorage.getItem('access')
          }
        })
        .then(function (){
          that.dialog1 = false;
          that.result = '';
          // item.status = 1;
          that.$notify.success({
            title: '处理成功'
          })
          that.reload();
        })
        .catch(function (error){
          that.$notify.error({
            title: '操作失败',
            message: error.message
          })
        })
    },
    fillResult(id){
      this.dialog1 = true;
      this.id = id;
    },
    checkReason(item){
      this.dialog = true;
      this.reason = item.reason;
    }
  },
  created(){
    const that = this;
    this.$api.getApplyList.getClaim()
      .then(function (response){
        console.log(response)
        that.desserts = response.results;
      })
  },
  setup(){
    return {
      icons: {
        mdiPencil,
        mdiCheckBold
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bold {
  font-weight: bold;
}
.rid{
  cursor: pointer;
}
.rid :hover{
  color: #000000 !important;
}
</style>